"use client";
import { prisma } from "@/db";

type TodoItemProps = {
  id: string;
  title: string;
  complete: boolean;
  toggleTodo: (id: string, complete: boolean) => void;
  removeTodo: (id: string) => void;
};

export default function TodoItem({
  id,
  title,
  complete,
  toggleTodo,
  removeTodo,
}: TodoItemProps) {
  console.log("removeTodo", removeTodo);
  console.log("toggleTodo", toggleTodo);
  return (
    <li className="flex gap-1 items-center">
      <input
        id={id}
        type="checkbox"
        className="cursor-pointer peer"
        defaultChecked={complete}
        onChange={(e) => toggleTodo(id, e.target.checked)}
        // onChange={(e) => removeTodo(id)}
      ></input>
      <label
        htmlFor={id}
        className="cursor-pointer peer-checked:line-through
    peer-check:text-slate-500"
      >
        {title}
      </label>
      <button
        className="text-red-500 hover:text-red-700"
        id={id}
        onClick={(e) => removeTodo(id)}
      >
        删除
      </button>
    </li>
  );
}
